<template>
  <div class="zbox">
    <div class="lineBox">
      <barEcharts />
    </div>
    <div class="tableBox">
      <div
        style="
          margin-bottom: 10px;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div style="color: #3e4853; font-size: 1.1rem; font-weight: 600">项目甘特图</div>
        <el-row
          type="flex"
          justify="space-around"
          align="middle"
          style="width: 20%; margin-right: -25%; font-size: 0.7rem"
        >
          <el-col :span="6">
            <div
              style="
                background-color: #95e1d3;
                border: 1px solid rgb(192, 192, 192);
                border-radius: 5px;
                height: 20px;
                line-height: 20px;
              "
            ></div>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="5"> 已完成</el-col>
          <el-col :span="6">
            <div
              style="
                background-color: #ffffff;
                border: 1px solid rgb(192, 192, 192);
                border-radius: 5px;
                height: 20px;
                line-height: 20px;
              "
            ></div></el-col
          ><el-col :span="1"></el-col>
          <el-col :span="5"> 未完成</el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="4" :pull="15">筛选：</el-col>
          <el-col :span="20" :pull="15"
            ><el-date-picker
              v-model="date"
              type="year"
              size="small"
              placeholder="选择年"
              value-format="yyyy"
              @change="changeHandler"
            >
            </el-date-picker
          ></el-col>
        </el-row>
      </div>
      <div style="width: 80%; height: 100%">
        <el-table
          :data="renderData"
          border
          style="width: 100%; margin-left: 10%"
          :row-style="{ height: '30px', padding: '0px' }"
        >
          <el-table-column
            label="工作内容\月份"
            prop="name"
            align="center"
            min-width="200"
          />
          <el-table-column label="1月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.one == 2 ? '#95e1d3' : '',
                }"
                style="width: 100%; height: 50px"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="2月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.two == 2 ? '#95e1d3' : '',
                }"
                style="width: 100%; height: 50px"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="3月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.three == 2 ? '#95e1d3' : '',
                }"
                style="width: 100%; height: 50px"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="4月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.four == 2 ? '#95e1d3' : '',
                }"
                style="width: 100%; height: 50px"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="5月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.five == 2 ? '#95e1d3' : '',
                }"
                style="width: 100%; height: 50px"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="6月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.six == 2 ? '#95e1d3' : '',
                }"
                style="width: 100%; height: 50px"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="7月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.seven == 2 ? '#95e1d3' : '',
                }"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="8月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.eight == 2 ? '#95e1d3' : '',
                }"
                style="width: 100%; height: 50px"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="9月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.nine == 2 ? '#95e1d3' : '',
                }"
                style="width: 100%; height: 50px"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="10月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.ten == 2 ? '#95e1d3' : '',
                }"
                style="width: 100%; height: 50px"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="11月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.eleven == 2 ? '#95e1d3' : '',
                }"
                style="width: 100%; height: 50px"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="12月" align="center" min-width="70">
            <template slot-scope="scope">
              <div
                :style="{
                  backgroundColor: scope.row.twelve == 2 ? '#95e1d3' : '',
                }"
                style="width: 100%; height: 50px"
              ></div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import barEcharts from "../scheduleMg/barEcharts.vue";
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          year: "2020",
          data: [
            {
              id: 1,
              name: "钢筋绑扎",
              one: 2, //0，1未完成，2已完成
              two: 2,
              three: 2,
              four: 2,
              five: 0,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 2,
              name: "浇筑道床",
              one: 0,
              two: 2,
              three: 2,
              four: 2,
              five: 0,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 3,
              name: "轨排拼装",
              one: 0,
              two: 0,
              three: 0,
              four: 0,
              five: 2,
              six: 2,
              seven: 2,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 4,
              name: "基底处理",
              one: 0,
              two: 0,
              three: 2,
              four: 2,
              five: 2,
              six: 2,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 5,
              name: "走行轨安装",
              one: 0,
              two: 0,
              three: 0,
              four: 2,
              five: 2,
              six: 2,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 6,
              name: "轨排铺设",
              one: 0,
              two: 0,
              three: 0,
              four: 0,
              five: 0,
              six: 2,
              seven: 2,
              eight: 2,
              nine: 2,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 7,
              name: "防迷流设置",
              one: 0,
              two: 0,
              three: 0,
              four: 2,
              five: 2,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
          ],
        },
        {
          id: 2,
          year: "2021",
          data: [
            {
              id: 1,
              name: "钢筋绑扎",
              one: 0, //0，1未完成，2已完成
              two: 0,
              three: 2,
              four: 2,
              five: 0,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 2,
              name: "浇筑道床",
              one: 0,
              two: 0,
              three: 0,
              four: 0,
              five: 0,
              six: 0,
              seven: 2,
              eight: 2,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 3,
              name: "轨排拼装",
              one: 0,
              two: 0,
              three: 0,
              four: 0,
              five: 2,
              six: 2,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 4,
              name: "基底处理",
              one: 0,
              two: 0,
              three: 2,
              four: 2,
              five: 2,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 5,
              name: "走行轨安装",
              one: 0,
              two: 0,
              three: 0,
              four: 2,
              five: 2,
              six: 2,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 6,
              name: "轨排铺设",
              one: 0,
              two: 0,
              three: 0,
              four: 0,
              five: 0,
              six: 0,
              seven: 2,
              eight: 2,
              nine: 2,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 7,
              name: "防迷流设置",
              one: 0,
              two: 0,
              three: 0,
              four: 2,
              five: 2,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
          ],
        },
        {
          id: 2,
          year: "2022",
          data: [
            {
              id: 1,
              name: "钢筋绑扎",
              one: 2, //0，1未完成，2已完成
              two: 2,
              three: 2,
              four: 0,
              five: 0,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 2,
              name: "浇筑道床",
              one: 0,
              two: 0,
              three: 2,
              four: 2,
              five: 0,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 3,
              name: "轨排拼装",
              one: 0,
              two: 0,
              three: 0,
              four: 0,
              five: 2,
              six: 2,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 4,
              name: "基底处理",
              one: 0,
              two: 0,
              three: 2,
              four: 2,
              five: 2,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 5,
              name: "走行轨安装",
              one: 0,
              two: 0,
              three: 0,
              four: 2,
              five: 2,
              six: 2,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 6,
              name: "轨排铺设",
              one: 0,
              two: 0,
              three: 0,
              four: 0,
              five: 0,
              six: 0,
              seven: 2,
              eight: 2,
              nine: 2,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 7,
              name: "防迷流设置",
              one: 0,
              two: 0,
              three: 0,
              four: 2,
              five: 2,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
          ],
        },
        {
          id: 3,
          year: "2023",
          data: [
            {
              id: 1,
              name: "钢筋绑扎",
              one: 2, //0，1未完成，2已完成
              two: 2,
              three: 2,
              four: 0,
              five: 0,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 2,
              name: "浇筑道床",
              one: 0,
              two: 0,
              three: 2,
              four: 2,
              five: 0,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 3,
              name: "轨排拼装",
              one: 0,
              two: 0,
              three: 0,
              four: 0,
              five: 2,
              six: 2,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 4,
              name: "基底处理",
              one: 0,
              two: 0,
              three: 2,
              four: 2,
              five: 2,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 5,
              name: "走行轨安装",
              one: 0,
              two: 0,
              three: 0,
              four: 2,
              five: 2,
              six: 2,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 6,
              name: "轨排铺设",
              one: 0,
              two: 0,
              three: 0,
              four: 0,
              five: 0,
              six: 0,
              seven: 2,
              eight: 2,
              nine: 2,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
            {
              id: 7,
              name: "防迷流设置",
              one: 0,
              two: 0,
              three: 0,
              four: 2,
              five: 2,
              six: 0,
              seven: 0,
              eight: 0,
              nine: 0,
              ten: 0,
              eleven: 0,
              twelve: 0,
            },
          ],
        },
      ],
      renderData: [],
      date: "2023",
    };
  },
  components: {
    barEcharts,
  },
  mounted() {
    this.renderData = this.tableData[3].data;
  },

  methods: {
    changeHandler() {
      console.log("this.date::: ", typeof this.date);
      this.renderData = this.tableData.filter((el) => {
        return el.year == this.date;
      })[0].data;
    },
  },
};
</script>

<style lang="less" scoped>
.zbox {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  .lineBox {
    width: 100%;
    height: 34%;
  }
  .tableBox {
    width: 100%;
    height: 60%;
    // padding-left: 10%;
    :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
      padding: 0;
    }
    :deep(.el-table .cell) {
      padding: 0;
    }

    div {
      line-height: 50px;
    }
  }
}
</style>
